<template>
  <div class="dashboard">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>面经后台</el-breadcrumb-item>
      <el-breadcrumb-item>数据看板</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 数据卡片区域 -->
    <el-row :gutter="20" class="card-row">
      <!-- 统计卡片 -->
      <el-col :xs="24" :sm="12" :md="6" :lg="6">
        <el-card class="stat-card" shadow="hover">
          <div class="stat-item">
            <i class="el-icon-user stat-icon"></i>
            <div class="stat-info">
              <span class="stat-label">活跃用户</span>
              <span class="stat-value">802</span>
              <span class="stat-trend up">↑ 5.23%</span>
            </div>
          </div>
        </el-card>

        <el-card class="stat-card" shadow="hover">
          <div class="stat-item">
            <i class="el-icon-tickets stat-icon"></i>
            <div class="stat-info">
              <span class="stat-label">平均访问量</span>
              <span class="stat-value">1298</span>
              <span class="stat-trend down">↓ 8.56%</span>
            </div>
          </div>
        </el-card>

        <!-- 推广卡片 -->
        <el-card class="promo-card" shadow="hover">
          <h4>推广活动</h4>
          <img src="@/assets/img.svg" alt="推广" @error="handleImageError" />
        </el-card>
      </el-col>

      <!-- 主图表 -->
      <el-col :xs="24" :sm="12" :md="18" :lg="18">
        <el-card class="main-chart" shadow="hover">
          <div ref="chart" class="chart-container" v-loading="chartLoading"></div>
        </el-card>
      </el-col>

      <!-- 底部图表 -->
      <el-col :xs="24" :sm="8" :md="8" :lg="8" v-for="item in chartList" :key="item.title">
        <el-card class="sub-chart" shadow="hover">
          <h4>{{ item.title }}</h4>
          <img :src="item.img" :alt="item.title" @error="handleImageError" />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'MyDashboard',
  data () {
    return {
      chartLoading: false,
      chartInstance: null,
      chartList: [
        { title: '性别分布情况', img: require('@/assets/chart-03.png') },
        { title: '浏览访问情况', img: require('@/assets/chart-01.svg') },
        { title: '设备系统访问情况', img: require('@/assets/chart-02.svg') }
      ]
    }
  },
  mounted () {
    this.initChart()
    window.addEventListener('resize', this.handleResize)
  },
  beforeDestroy () {
    window.removeEventListener('resize', this.handleResize)
    this.chartInstance?.dispose()
  },
  methods: {
    // 初始化图表
    initChart () {
      this.chartLoading = true
      this.$nextTick(() => {
        this.chartInstance = echarts.init(this.$refs.chart)
        this.chartInstance.setOption({
          title: { text: '销售数据统计', left: 'center' },
          tooltip: { trigger: 'axis' },
          xAxis: {
            type: 'category',
            data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
          },
          yAxis: { type: 'value' },
          series: [{
            data: [5, 20, 36, 10, 10, 20],
            type: 'bar',
            itemStyle: { color: '#409EFF' }
          }]
        })
        this.chartLoading = false
      })
    },
    // 响应式处理
    handleResize () {
      this.chartInstance?.resize()
    },
    // 图片加载失败处理
    handleImageError (e) {
      e.target.style.display = 'none'
    }
  }
}
</script>

<style lang="scss" scoped>
// 基础样式
.dashboard {
  padding: 24px;
  background: #f5f7fa;
  min-height: 100vh;
}

// 面包屑样式
.el-breadcrumb {
  margin-bottom: 24px;
  font-size: 14px;
}

// 卡片间距
.card-row {
  margin-top: 20px;
}

// 统计卡片
.stat-card {
  margin-bottom: 20px;
  border: none;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.3s;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
  }

  .stat-item {
    display: flex;
    align-items: center;
    gap: 16px;
  }

  .stat-icon {
    font-size: 32px;
    color: #409EFF;
  }

  .stat-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .stat-label {
    font-size: 14px;
    color: #909399;
  }

  .stat-value {
    font-size: 24px;
    font-weight: bold;
    color: #303133;
  }

  .stat-trend {
    font-size: 12px;

    &.up { color: #67C23A; }
    &.down { color: #F56C6C; }
  }
}

// 推广卡片
.promo-card {
  margin-bottom: 20px;
  text-align: center;
  border: none;
  border-radius: 8px;

  h4 {
    margin: 0 0 16px 0;
    font-size: 16px;
    color: #303133;
  }

  img {
    width: 100%;
    max-height: 120px;
    object-fit: contain;
  }
}

// 图表卡片
.main-chart,
.sub-chart {
  margin-bottom: 20px;
  border: none;
  border-radius: 8px;

  h4 {
    margin: 0 0 16px 0;
    font-size: 16px;
    color: #303133;
  }

  .chart-container {
    width: 100%;
    height: 400px;
  }

  img {
    width: 100%;
    height: 200px;
    object-fit: contain;
  }
}

// 响应式设计
@media (max-width: 768px) {
  .dashboard {
    padding: 16px;
  }

  .stat-value {
    font-size: 20px;
  }
}
</style>
